<template>
    <div class="wrapper main_wrap" ref="main">
        <page_header :content="content"></page_header>

        <el-card class="manage_card" ref="clue_card">

            <div class="manage_search" ref="result_search">
                <div class="manage_search_item flexbettwen">
                    <el-input size="medium" v-model="search.keyword"
                              placeholder="请输入关键字搜索" clearable @clear="select_page()"></el-input>
                    <el-button plain type="primary" icon="el-icon-search" size="medium" @click="select_page"
                               style="padding-right: 10px;padding-left: 10px;margin-left: 20px">
                        搜索
                    </el-button>
                </div>
            </div>

            <div class="manage_list user_content" :style="'height:' + this.list_height + 'px'">

                <div class="table_title">
                    <span class="table_item title_item item_1th">姓名</span>
                    <span class="table_item title_item item_2th">电话</span>
                    <span class="table_item title_item item_3th">角色</span>
                    <span class="table_item title_item item_4th">操作</span>
                </div>

                <ul class="table_title table_list">
                    <li v-for="(item, index) in table_data" :key="index">
                        <span class="table_item list_item item_1th">{{item.name}}</span>
                        <span class="table_item list_item item_2th">{{item.phone}}</span>
                        <span class="table_item list_item item_3th">{{item.role_name}}</span>
                        <span class="table_item list_item item_4th">
                            <el-switch
                                :active-value="typeof item.state == 'boolean' ? true : 1"
                                :inactive-value="typeof item.state == 'boolean' ? false : 0"
                                v-model="item.state"
                                active-color="#13ce66"
                                inactive-color="#9f9f9f"
                                @change="change_state(item)"
                            >
                            </el-switch>
                        </span>
                    </li>
                </ul>
            </div>

        </el-card>

    </div>
</template>

<script>
    import page_header from "../../components/page_header";
    import pagination from "../../components/pagination";
    import table_list from "../../components/table_list";
    import api_user from "../../api/api_user";
    import _calc_height from "../../common/_calc_height";

    export default {
        components: {
            table_list,
            page_header,
            pagination
        },
        data() {

            return {
                content: '员工管理',
                search: {
                    keyword: ''
                }, //检索

                table_data: [],
                list_height: 0
            }
        },
        created() {
            this.select_page()
        },
        mounted() {
            this.calc_height()
        },
        methods: {
            // 剩余高度
            calc_height() {
                const card_height = this.$refs.main.clientHeight
                const search_height = this.$refs.result_search.offsetHeight
                _calc_height.load(card_height, search_height,50, this)
            },

            select_page() {
                let that = this;
                api_user.list(this.search, function (data) {
                    that.table_data = data
                })
            },

            //修改状态
            change_state(item) {
                let uid = item.id
                let state = item.state;
                let that = this
                api_user.state(state, uid, function (data) {
                    that.select_page()
                })
            }

        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/style/manage/user";

</style>
